<template>
  <div class="list-wrapper">
    <!-- <filtrate :fetchData="fetchData" :isShow="isShow"></filtrate> -->

    <div class="list-top">
      <div>
          <router-link to="/dashboard/courseReturn">
            <span>新课程投资回报率</span>
          </router-link>
          <span class="el-icon-arrow-right"></span>
          <span @click="goCourseDetail">{{info.name}}</span>
      </div>
		</div>



    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
      <thead>
      <tr>
        <th>序号</th>
        <th>开班日期</th>
        <th>参与学员人数</th>
        <th>课程成本</th>
        <th>课程收入</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in list">
        <td>{{index+1}}</td>
        <td @click="goTrainingDetail(item.id)">{{item.startdate}}</td>
        <td>{{item.trainee}}</td>
        <td>{{item.cost}}</td>
        <td>{{item.income}}</td>
      </tr>
      </tbody>
    </table>
    <div class="pagination">
      <el-pagination v-if="list.length" @current-change="handleCurrentChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <div class="mess" v-if="!list.length">暂无数据</div>
    </div>
  </div>
</template>
<script>
  import filtrate from "../filtrate";

  export default {
    data() {
      return {
        isShow: true,
        page: 1,
        total: 0,
        id: "",
        filData: {},
        info: {},
        list: [],
        courseId: ""
      };
    },
    components: {
      filtrate
    },
    methods: {
      fetchData(time,type) {
        let data = {
          time: time ? time : "",
          course: this.id,
          page: this.page
        };
        this.apiPost("Dashboard/courseReturnDetail", data).then(res => {
          this.info = res.info;
          this.list = res.list;
          this.courseId = res.info.id;
          this.total = res.total;
        });
      },
      handleCurrentChange(val) {
        this.page = val;
        if (this.filData) {
          this.fetchData(this.filData.time,this.filData.courseType);
        } else {
          this.fetchData();
        }
      },
      goCourseDetail() {
        window.open(SITE+"course/detail/"+this.courseId);
      },
      goTrainingDetail(id) {
        window.open(SITE+"training/listDetail/"+id);
      },
      goPayDetail(id) {
        window.open(SITE+"dashboard/studentPay/"+id);
      }
    },
    created() {
      this.id = this.$route.params.id;
      this.filData = Lockr.get("filData");
      if (this.filData) {
        this.fetchData(this.filData.time,this.filData.courseType);
      } else {
        this.fetchData();
      }
    }
  };
</script>
<style lang="css" scoped>
  .container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.el-icon-arrow-right {
  margin: 0 5px;
  font-size: 14px;
}
.pagination {
  text-align: center;
  margin-top: 30px;
}
.mess{
  color: #666;
}
</style>
